<div class="section">
  <header>
    <h1>Welcome to the Keycloak Angular Demo App!</h1>
    <p class="description">This is the public homepage of your application.</p>
  </header>

  <main>
    <section>
      <p class="description">To access the application, use the following credentials for testing:</p>
      <ul class="credentials">
        <li>
          <strong>User:</strong> <code>johndoe</code>
          <button class="copy-btn" (click)="copyToClipboard('johndoe')" aria-label="Copy User">
            <i class="copy-icon">📋</i>
          </button>
        </li>
        <li>
          <strong>Password:</strong> <code>qwerty&#64;123</code>
          <button class="copy-btn" (click)="copyToClipboard('qwerty@123')" aria-label="Copy Password">
            <i class="copy-icon">📋</i>
          </button>
        </li>
      </ul>
    </section>

    <div *ngIf="copyMessage$ | async as copyMessage" class="message-box">
      {{ copyMessage }}
    </div>
  </main>
</div>
